<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control class="top-segmented-control" :current="current" :values="items"
				:style-type="styleType" :inActiveColor="inactiveColor" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view v-for="(service, index) in newServices" :key="index">
					<uni-card :title="service.service_type" :extra="transformedTime(service.visit_time)">
						<view class="service-body">服务地址: {{service.address}} </view>
						<view class="service-body">订单金额: {{service.service_amount}} 元</view>
						<view class="service-body">联系人: {{service.contact_name}}</view>
						<view class="service-body">服务备注: {{service.remark}}</view>
						<view class="btn-container">
							<button class="assignButton" type="primary" size="mini"
								@click="assignTask(index)"><text>分配任务</text></button>
							<uni-popup :ref="'assignDialog-'+index" type="center" background-color="#fff">
								<view class="popup-card">
									<uni-forms label-position="left">
										<view class="service-body">服务类型: {{service.service_type}} </view>
										<view class="service-body">服务时间: {{transformedTime(service.visit_time) }}</view>
										<view class="service-body">服务地址: {{service.address}}</view>
										<view class="service-body">
											<text>服务人员:</text>
											<uni-data-select v-model="value" :localdata="employees" @ShowData="showServantList" @change="change()"
												class="select-style">
											</uni-data-select>
										</view>
									</uni-forms>
									<view class="btn-pop-container">
										<button type="default" size="mini" class="btn-pop"
											@click="close(index)"><text>取消</text></button>
										<button type="primary" size="mini" class="btn-pop" :disabled="disableConform"
											@click="submit(service,index)"><text>确认</text></button>
									</view>

								</view>
							</uni-popup>
						</view>
					</uni-card>
				</view>
			</view>
			<view v-if="current === 1">
				<view v-for="(order, index) in orders" :key="index">
					<uni-card :title="order.service_type" :extra="transformedTime(order.visit_time)">
						<view class="service-body">服务地址: {{order.address}} </view>
						<view class="service-body">服务备注: {{order.remark}}</view>
						<view class="service-body">客户姓名: {{order.contact_name}}</view>
						<view class="service-body">服务人员: {{order.servant_name}}</view>
						<view slot="actions" class="card-container">
							<view class="card-actions-item"> 邻里收入<view class="income">{{order.company_income}}</view>
							</view>
							<view class="card-actions-item"> 物业收入<view class="income">{{order.community_income}}</view>
							</view>
							<view class="card-actions-item"> 服务人员收入<view class="income">{{order.servant_income}}</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['新订单', '已分配'],
				current: 0,
				inactiveColor: '#8a8a8a',
				activeColor: '#42B033',
				styleType: 'text',
				newServices: [],
				disableConform: true,
				// order: {
				// 	order_id: '',
				// 	service_type: '',
				// 	remark: '',
				// 	visit_time: '',
				// 	address: '',
				// 	service_amount: '',
				// 	contact_name: '',
				// 	servant_name: '',
				// 	company_income: 0,
				// 	community_income: 0,
				// 	servant_income: 0
				// },
				orders: [],
				value: '',
				employees: []
			}
		},
		onLoad() {
			this.fetchData();
		},
		onPullDownRefresh() {
			console.log("onPUllDownRefresh");
			this.refreshData();
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			assignTask(index) {
				this.$refs['assignDialog-' + index][0].open('center');
			},
			close(index) {
				this.$refs['assignDialog-' + index][0].close();
				this.value = '';
			},
			change() {
				this.disableConform = false;
			},
			submit(service, index) {
				uni.showLoading({
					title: '任务分配中...'
				})
				this.newServices = this.newServices.filter(item => item !== service); //把这个提交的移除掉

				// 订单分配
				uni.request({
					url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/assign_servant/',
					method: "post",
					data: {
						order_id: service.order_id,
						servant_id: this.employees.find(employee => employee.servant_name === this.value)
							.servant_id
					},
					success: (res) => {
						console.log(res.data);
					},
					fail: (err) => {
						console.log(err);
					}
				});
				
				// 已分配
				uni.request({
					url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/get_assigned_order_list/', // Replace with your actual URL
					method: "post",
					success: (res) => {
						this.orders = res.data.data;
						console.log("已分配订单：");
						console.log(this.orders);
					},
					fail: (err) => {
						console.log(err);
					}
				});

				this.$refs['assignDialog-' + index][0].close();

				setTimeout(() => {
					uni.hideLoading()
					this.disableConform = true;
					this.value = '';
				}, 2000)
			},

			fetchData() {
				// 新订单
				uni.request({
					url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/get_new_order_list/', // Replace with your actual URL
					method: "post",
					success: (res) => {
						this.newServices = res.data.data;
						console.log("新订单：");
						console.log(this.newServices);
					},
					fail: (err) => {
						console.log(err);
					}
				});

				// 已分配
				uni.request({
					url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/get_assigned_order_list/', // Replace with your actual URL
					method: "post",
					success: (res) => {
						this.orders = res.data.data;
						console.log("已分配订单：");
						console.log(this.orders);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			transformedTime(date) {
				return date.replace('T', ' ').replace('Z', ' ');
			},
			refreshData() {
				setTimeout(() => {
					this.fetchData();
					uni.stopPullDownRefresh();
				}, 2000);
			},
			showServantList(){
				console.log("-----")
				// 订单分配的阿姨列表
				uni.request({
					url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/get_servant_list/',
					method: "post",
					success: (res) => {
						this.employees = res.data.data;
						for (let i = 0; i < this.employees.length; i++) {
							this.employees[i].text = this.employees[i].servant_name;
							this.employees[i].value = this.employees[i].servant_name;
						}
						console.log("阿姨列表（新增两个属性）：");
						console.log(this.employees);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.btn-container {
		display: flex;
	}

	.assignButton {
		margin-top: 6rpx;
		margin-right: 0;
	}

	.service-body {
		margin: 4rpx 50rpx 4rpx 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center;
		gap: 30rpx;
	}

	.popup-card {
		background-color: #fff;
		width: 610rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.btn-pop-container {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}
	.btn-pop {
		width: 200rpx;
	}
	.select-style {
		width: 200rpx;
	}

	.card-container {
		border-top: 2rpx solid #e0e0e0;
		/* 设置顶部边框，颜色可以根据你的设计调整 */
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.income {
		display: flex;
		justify-content: center;
		padding-top: 12rpx;
	}

	.top-segmented-control {
		position: fixed;
		top: 0;
		/* 调整为你希望的具体位置 */
		left: 0;
		right: 0;
		z-index: 1000;
		/* 确保它在其他内容上方 */
		background-color: white;
		/* 设置背景颜色以防止覆盖内容 */
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	.content {
		margin-top: 90rpx;
	}
</style>